<template>
  <div>
    <div class="cs-filter-container">
      <el-select v-model="listQuery.action" filterable placeholder="日志类型">
        <el-option label="下线" value="下线" />
        <el-option label="上线" value="上线" />
      </el-select>
      <el-date-picker
        v-model="daterangeValue"
        :picker-options="daterangePickerOptions"
        type="daterange"
        align="right"
        unlink-panels
        range-separator="至"
        start-placeholder="起始时间"
        end-placeholder="结束时间"
        value-format="yyyy-MM-dd"
        @change="daterangeChanged"
      />
      <el-button
        type="primary"
        size="small"
        icon="el-icon-search"
        @click="listAction"
      >
        搜索
      </el-button>
      <el-button
        type="info"
        size="small"
        icon="el-icon-refresh-right"
        @click="resetFilter"
      >
        重置
      </el-button>
    </div>
    <div class="cs-filter-result">
      <el-table
        v-loading="listLoading"
        :data="action.list"
        border
        fit
        size="small"
        highlight-current-row
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
      >
        <el-table-column type="expand">
          <template slot-scope="{ row }">
            <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item label="原始日志内容">
                {{ row.rowData }}
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column align="center" label="日志类型">
          <template slot-scope="{ row }">{{ row.action }}</template>
        </el-table-column>
        <el-table-column align="center" label="渠道">
          <template slot-scope="{ row }">{{ row.appChannel }}</template>
        </el-table-column>
        <el-table-column align="center" label="包名">
          <template slot-scope="{ row }">{{ row.rowData.bundle_id }}</template>
        </el-table-column>
        <el-table-column align="center" label="版本">
          <template slot-scope="{ row }">{{ row.rowData.app_version }}</template>
        </el-table-column>
        <el-table-column align="center" label="设备ID">
          <template slot-scope="{ row }">{{ row.deviceId }}</template>
        </el-table-column>
        <el-table-column align="center" label="IP">
          <template slot-scope="{ row }">{{ row.rowData.client_ip }}</template>
        </el-table-column>
        <el-table-column align="center" label="时间">
          <template slot-scope="{ row }">{{
            row.dateTime | parseTime
          }}</template>
        </el-table-column>
      </el-table>
      <TablePagination
        :current-page="listQuery.page"
        :limit="listQuery.limit"
        :total="action.total"
        :loading="listLoading"
        @handleSizeChange="handleSizeChange"
        @handleCurrentChange="handleCurrentChangeOffset"
      />
    </div>
  </div>
</template>
<script>
import TablePagination from '@/components/TablePagination'
import { xhrListAction } from '@/api/account'
export default {
  components: { TablePagination },
  data() {
    const query = this.$route.query
    return {
      listQuery: {
        limit: 20,
        offset: 0,
        accountId: (query && query.id) || null,
        startTime: null,
        endTime: null,
        action: null
      },
      defaultQueryParams: {
        limit: 20,
        offset: 0,
        accountId: (query && query.id) || null
      },
      daterangeValue: [],
      action: {}
    }
  },

  created() {
    this.listAction()
  },
  methods: {
    doSearch() {
      this.listAction()
    },
    listAction() {
      xhrListAction(this.listQuery)
        .then(resp => {
          const dataList = resp.data.list
          for (const i in dataList) {
            dataList[i].rowData = JSON.parse(dataList[i].rowData)
          }
          resp.data.list = dataList
          this.action = resp.data
        })
        .catch(err => {
          this.$message.error(err)
        })
    }
  }
}
</script>
